<template>
  <div class="wrap">
    <ul class="jing">
      <li v-for="item in data.records" :key="item.id">
        <img :src="'http://sc.wolfcode.cn' + item.coverImg" />
        <div class="button">
          <h2>{{ item.name }}</h2>
          <p>{{ item.coin }}</p>
          <span>立即兑换</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { JingpinAPI } from "@/Request/api";
export default {
  async created() {
    //await Promise对象
    let res = await JingpinAPI();
    this.data = res.data.data.data;
    console.log("res2:", this.data);
  },

  data() {
    return {
      data: "",
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
.jing {
  display: flex;
  justify-content: space-between;
  li {
    // width: 285px;
    // height: 412px;
    img {
      width: 285px;
      height: 250px;
    }
    .button {
      width: 285px;
      height: 162px;
      background: #ffffff;
      text-align: center;
      h2 {
        margin-top: 20px;
      }
      p {
        margin: 20px 0;
        color: red;
        font-weight: 700;
      }
      span {
        border: 1px solid blue;
        padding: 6px 10px;
        color: blue;
      }
    }
  }
}
</style>